import Box from '@mui/material/Box'
import Typegraphy from '@mui/material/Typography'

export default function TailwindTest() {
  return (
    <Box sx={{ width: '100%', maxWidth: '1200px', margin: '30px auto', flex: '1' }}>
      {/* Aspect Ratio Examples */}
      <Typegraphy variant="h4" gutterBottom>
        Aspect Ratio
      </Typegraphy>
      <div className="columns-3 gap-b-10">
        <div className="h-30 aspect-3/2" style={{ backgroundColor: 'blue', color: 'white' }}>
          {' '}
          aspect-3/2{' '}
        </div>
        <div className="h-30 aspect-video" style={{ backgroundColor: 'blue', color: 'white' }}>
          {' '}
          aspect-video{' '}
        </div>
        <div className="h-30 aspect-square" style={{ backgroundColor: 'red' }}>
          {' '}
          aspect-square{' '}
        </div>
        <div className="h-20 aspect-auto" style={{ backgroundColor: 'yellow' }}>
          {' '}
          aspect-auto{' '}
        </div>
        <div className="h-20 aspect-[calc(4*3+1)/3]" style={{ backgroundColor: 'blue', color: 'white' }}>
          {' '}
          aspect-[calc(4*3+1)/3]{' '}
        </div>
        <div
          className="h-20 aspect-[calc(4*3+1)/3] md:aspect-square"
          style={{ backgroundColor: 'blue', color: 'white' }}
        >
          {' '}
          aspect-[calc(4*3+1)/3] md:aspect-square{' '}
        </div>
      </div>

      {/* Break After Examples */}
      <Typegraphy variant="h4" gutterBottom>
        Break After
      </Typegraphy>
      <div className="columns-2">
        <p>Well, let me tell you something, ...</p>
        <p className="break-after-column">Sure, go ahead, laugh...</p>
        <p>Maybe we can live without...</p>
        <p>Look. If you think this is...</p>
      </div>

      {/* Break Before Examples */}
      <Typegraphy variant="h4" gutterBottom>
        Break Before
      </Typegraphy>
      <div className="columns-2">
        <p>Well, let me tell you something, ...</p>
        <p className="break-before-column">Sure, go ahead, laugh...</p>
        <p>Maybe we can live without...</p>
        <p>Look. If you think this is...</p>
      </div>

      {/* Responsive Examples */}
      <Typegraphy variant="h4" gutterBottom>
        响应式
      </Typegraphy>
      <div className="block mb-10">
        <div className="h-50 bg-amber-500 sm:w-30 md:w-40 lg:w-50 xl:w-60 2xl:w-70 p-10">
          sm:w-30 md:w-40 lg:w-50 xl:w-60 2xl:w-70
        </div>
      </div>

      <div className="sm:columns-1 md:columns-2  lg:columns-3 xl:columns-4 2xl:columns-5">
        <div className="h-50 bg-blue-600"></div>
      </div>

      {/* Pseudo Classes Examples */}
      <Typegraphy variant="h4" gutterBottom>
        伪类
      </Typegraphy>
      <div className="columns-1">
        <a
          className="block h-50 bg-amber-500 hover:bg-cyan-400 active:bg-cyan-400 focus:bg-amber-950"
          href="/practices/items/tailwind"
        >
          假装是个链接
        </a>
      </div>

      {/* Flexbox Examples */}
      <Typegraphy variant="h4" gutterBottom>
        Flexbox 布局
      </Typegraphy>
      <div className="mb-10">
        <div className="flex justify-between items-center bg-gray-100 p-4 rounded">
          <div className="w-20 h-20 bg-blue-500 rounded flex items-center justify-center">1</div>
          <div className="w-20 h-20 bg-green-500 rounded flex items-center justify-center">2</div>
          <div className="w-20 h-20 bg-red-500 rounded flex items-center justify-center">3</div>
        </div>
        <div className="flex flex-col items-center mt-4 bg-gray-100 p-4 rounded">
          <div className="w-20 h-20 bg-purple-500 rounded mb-2 flex items-center justify-center">A</div>
          <div className="w-20 h-20 bg-pink-500 rounded mb-2 flex items-center justify-center">B</div>
          <div className="w-20 h-20 bg-yellow-500 rounded flex items-center justify-center">C</div>
        </div>
      </div>

      {/* Grid Examples */}
      <Typegraphy variant="h4" gutterBottom>
        Grid 布局
      </Typegraphy>
      <div className="mb-10">
        <div className="grid grid-cols-3 gap-4">
          <div className="h-20 bg-blue-500 rounded flex items-center justify-center">1</div>
          <div className="h-20 bg-green-500 rounded flex items-center justify-center">2</div>
          <div className="h-20 bg-red-500 rounded flex items-center justify-center">3</div>
          <div className="h-20 bg-purple-500 rounded flex items-center justify-center">4</div>
          <div className="h-20 bg-pink-500 rounded flex items-center justify-center">5</div>
          <div className="h-20 bg-yellow-500 rounded flex items-center justify-center">6</div>
        </div>
      </div>

      {/* Color Examples */}
      <Typegraphy variant="h4" gutterBottom>
        颜色和背景
      </Typegraphy>
      <div className="mb-10">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="h-20 bg-red-500 rounded flex items-center justify-center text-white">Red 500</div>
          <div className="h-20 bg-blue-500 rounded flex items-center justify-center text-white">Blue 500</div>
          <div className="h-20 bg-green-500 rounded flex items-center justify-center text-white">Green 500</div>
          <div className="h-20 bg-yellow-500 rounded flex items-center justify-center text-white">Yellow 500</div>
          <div className="h-20 bg-purple-500 rounded flex items-center justify-center text-white">Purple 500</div>
          <div className="h-20 bg-pink-500 rounded flex items-center justify-center text-white">Pink 500</div>
          <div className="h-20 bg-indigo-500 rounded flex items-center justify-center text-white">Indigo 500</div>
          <div className="h-20 bg-gray-500 rounded flex items-center justify-center text-white">Gray 500</div>
        </div>
      </div>

      {/* Text Examples */}
      <Typegraphy variant="h4" gutterBottom>
        文本和排版
      </Typegraphy>
      <div className="mb-10">
        <div className="space-y-2">
          <p className="text-xs">这是 xs 文本 (0.75rem)</p>
          <p className="text-sm">这是 sm 文本 (0.875rem)</p>
          <p className="text-base">这是 base 文本 (1rem)</p>
          <p className="text-lg">这是 lg 文本 (1.125rem)</p>
          <p className="text-xl">这是 xl 文本 (1.25rem)</p>
          <p className="text-2xl">这是 2xl 文本 (1.5rem)</p>
          <p className="text-3xl">这是 3xl 文本 (1.875rem)</p>
          <p className="font-bold">这是粗体文本</p>
          <p className="font-italic">这是斜体文本</p>
          <p className="underline">这是带下划线的文本</p>
          <p className="line-through">这是带删除线的文本</p>
          <p className="uppercase">这是大写文本</p>
          <p className="lowercase">THIS IS LOWERCASE TEXT</p>
          <p className="capitalize">this is capitalized text</p>
          <p className="text-left">这是左对齐文本</p>
          <p className="text-center">这是居中对齐文本</p>
          <p className="text-right">这是右对齐文本</p>
        </div>
      </div>

      {/* Spacing Examples */}
      <Typegraphy variant="h4" gutterBottom>
        边距和内边距
      </Typegraphy>
      <div className="mb-10">
        <div className="space-y-4">
          <div className="bg-blue-100 p-4">
            <div className="bg-blue-300 m-2 p-2">m-2 p-2</div>
          </div>
          <div className="bg-green-100 p-4">
            <div className="bg-green-300 m-4 p-4">m-4 p-4</div>
          </div>
          <div className="bg-red-100 p-4">
            <div className="bg-red-300 mx-auto my-4 px-6 py-3 w-1/2">mx-auto my-4 px-6 py-3 w-1/2</div>
          </div>
        </div>
      </div>

      {/* Border and Rounded Examples */}
      <Typegraphy variant="h4" gutterBottom>
        边框和圆角
      </Typegraphy>
      <div className="mb-10">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="h-20 bg-white border border-gray-300 rounded flex items-center justify-center">默认边框</div>
          <div className="h-20 bg-white border-2 border-blue-500 rounded flex items-center justify-center">border-2</div>
          <div className="h-20 bg-white border-4 border-green-500 rounded flex items-center justify-center">border-4</div>
          <div className="h-20 bg-white border border-red-500 rounded-full flex items-center justify-center">圆角</div>
        </div>
      </div>

      {/* Shadow Examples */}
      <Typegraphy variant="h4" gutterBottom>
        阴影效果
      </Typegraphy>
      <div className="mb-10">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="h-20 bg-white rounded shadow-sm flex items-center justify-center">shadow-sm</div>
          <div className="h-20 bg-white rounded shadow flex items-center justify-center">shadow</div>
          <div className="h-20 bg-white rounded shadow-md flex items-center justify-center">shadow-md</div>
          <div className="h-20 bg-white rounded shadow-lg flex items-center justify-center">shadow-lg</div>
        </div>
      </div>

      {/* Transition Examples */}
      <Typegraphy variant="h4" gutterBottom>
        过渡和动画
      </Typegraphy>
      <div className="mb-10">
        <div className="flex flex-wrap gap-4">
          <div className="w-24 h-24 bg-blue-500 rounded transition duration-300 hover:bg-red-500 flex items-center justify-center text-white">
            Hover me
          </div>
          <div className="w-24 h-24 bg-green-500 rounded transition duration-500 hover:rotate-45 flex items-center justify-center text-white">
            Rotate
          </div>
          <div className="w-24 h-24 bg-purple-500 rounded transition duration-700 hover:scale-125 flex items-center justify-center text-white">
            Scale
          </div>
        </div>
      </div>
    </Box>
  )
}
